<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta content="0" http-equiv="expires">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <title>hello, world!</title>
    <style>
        * {
            font-size: 24px;
            margin: 0.5em;
        }
    </style>
</head>
<body style="margin-left: 50px;">
<h1 id="now">

</h1>
<hr/>
<table id="t1">
    <tr><th>no</th><th>名称</th></tr>






</table>
<hr/>
<input type="button" value="改变原始body标签中的字体颜色" onclick="$(body).css('color', '#00FF00');"/>
<h1>
    <div class="title">span</div>
    <p class="title">p</p>
    <div class="title">div</div>
    <input type="button" value="改变class为title的内容" onclick="$('.title').html('this the title');"/>
    <input type="button" value="取得classs为title的内容" onclick="alert($('.title').html());//拿第一个"/>
</h1>
<h1>
    <div id="div1">原始div1内容</div>
    <input type="button" value="改变id为div1的内容" onclick="$('#div1').html('div1新内容');"/>
    <input type="button" value="取得div1的内容" onclick="alert($('#div1').html());"/><br/>
    <input type="text" id="text1" value="初始值" placeholder="请输入初始值"/>
    <input type="button" value="改变id为text1的内容" onclick="$('#text1').val('text1中的新内容');"/>
    <input type="button" value="取得text1的值" onclick="alert($('#text1').val());"/>

</h1>
<h1>
    <span id="currentUsername">当前未登录</span>
</h1>
<p>
    当前页面的url：<span id="current_url"></span>
    <a href="../index.html">返回主页【/index.html】</a>
</p>
<hr/>
<p>POST操作示例1：登录</p>
<div>
    <form id="login-form" onsubmit="return false;">
        用户名：<input type="text" id="username" name="username" value="admin"/><br/>
        密码：<input type="text" id="password" name="password" value="123456"/><br/>
        <input type="button" value="提交" onclick="loginPerson();"/>
        <input type="button" value="当前登录用户" onclick="window.open('getCurrentPerson');"/>
    </form>
</div>
<p>POST操作示例2：新增用户</p>
<div>
    <form id="insert-form" onsubmit="return false;">
        ID：<input type="text" name="id" value="007"/>
        name：<input type="text" name="name" value="007"/>
        username：<input type="text" name="username" value="007"/>
        <br/>
        password：<input type="text" name="password" value="123456"/>
        remark：<input type="text" name="remark" value="goodperson"/>
        <input type="button" value="提交" onclick="addPerson();"/>
    </form>
</div>
<p>PUT与GET操作示例：更新用户</p>
<div>
    <form id="update-person-form" onsubmit="return false;">
        ID：<input type="text" id="person_id" name="id" value="007"/>
        name：<input type="text" name="name" value="007"/>
        username：<input type="text" name="username" value="007"/>
        <br/>
        password：<input type="text" name="password" value="123456"/>
        remark：<input type="text" name="remark" value="goodperson"/>
        爱好：
        <input type="checkbox" name="chk" value="1"/>水果
        <input type="checkbox" name="chk" value="2"/>饮料
        <input type="checkbox" name="chk" value="3"/>白开水
        <input type="button" value="提交修改" onclick="updatePerson();"/>
        <input type="button" value="查看这个" onclick="getOnePerson($('#person_id').val());"/>
    </form>
</div>
<p>DELETE操作示例</p>
<div>
    ID：<input id="delete_person_id" value="007"/>
    <input type="button" value="删除" onclick="deletePerson($('#delete_person_id').val());"/>
</div>
<p>查看全部Person</p>
<div>
    <input type="button" value="列出" onclick="listAllPerson();"/>
</div>
</body>
</html>
<!--注意引用的路径，尽量采用相对路径-->
<script src="../js/jquery.3.2.1.min.js"></script>
<script src="../js/utils.js"></script>
<script>

    function findPersonById(id) {
        $.ajax({
            type: 'get',//get、delet之一
            url: '/hello/findPersonById',//uri，后台
            data: {id: id},//json格式的数据
            async: true,//是否异步，默认为true，可不写，如为false，前端会等url请求完毕才能执行其它任务
            success: function (data) {//回调函数，调用执行成功后的回调函数
                alert(JSON.stringify(data));
                console.log(data);
            },
            error: function (xhr, textStatus, errorThrown) {//回调函数，调用执行失败后的回调函数
                console.log(xhr); console.log(textStatus); console.log(errorThrown);
            }
        });
    }
    findPersonById('007');












    //listAllPerson();
    setInterval(function () {
        $('#now').html(getNowTime());
    }, 1000);
    let config = {
        username: 'admin',
        password: '123456',
        url: 'http://localhost:8080/hello/loginPerson'
    };

    //保存
    sessionStorage['config'] = JSON.stringify(config);
    //取？
    let conf = JSON.parse(sessionStorage['config']);
    alert(conf.url);

/*
    sessionStorage['username'] = `goodman好人`;
    alert(sessionStorage['username']);
    sessionStorage['username'] = `badman`;
    alert(sessionStorage['username']);

 */
    var table = $('#t1');
    for (var i = 0; i < 3; i++) {
        var tr = `<tr><td>${i + 1}</td><td>${"学生" + (i + 1)}</td></tr>`;
        table.append(tr);
    }

    var arr = [1, 2, 3, 4, 5];
    //alert(arr);

    function listAllPerson() {
        $.ajax({
            type: 'get',
            url: '/hello/listAllPerson',
            contentType: "application/json;charset=utf-8",
            success: function (data) {
                alert(`listAllPerson数据为：${data}`);
                console.log(data);
            },
            error: function (xhr, textStatus, errorThrown) {
            }
        });
    }

    //新增一个person, post操作
    function addPerson() {
        alert("您要提交的数据是：" + JSON.stringify($("#insert-form").serializeObject()));
        $.ajax({
            type: 'post',
            url: '/hello/addPerson',
            data: JSON.stringify($("#insert-form").serializeObject()),
            contentType: "application/json;charset=utf-8",
            success: function (data) {
                alert(JSON.stringify(data));
            },
            error: function (xhr, textStatus, errorThrown) {
                var msg = xhr.responseText;
                var response = JSON.parse(msg);
                alert('操作执行异常，请查看浏览器控制台信息');
                console.log(xhr);
                console.log(textStatus);
                console.log(errorThrown);
            }
        });
    }
    //
    //更新一个person, put操作
    function updatePerson() {
        alert(JSON.stringify($("#update-person-form").serializeObject()));
        $.ajax({
            type: 'put',
            url: '/hello/updatePerson',
            data: JSON.stringify($("#update-person-form").serializeObject()),
            contentType: "application/json;charset=utf-8",
            success: function (data) {
                alert(JSON.stringify(data));
            },
            error: function (xhr, textStatus, errorThrown) {
                var msg = xhr.responseText;
                var response = JSON.parse(msg);
                alert('操作执行异常，请查看浏览器控制台信息');
                console.log(xhr);
                console.log(textStatus);
                console.log(errorThrown);
            }
        });
    }

    //取得一个person，get操作
    function getOnePerson(id) {
        let data = {id: id};
        $.ajax({
            type: 'get',
            url: '/hello/getOnePerson',
            data: data,
            success: function (data) {
                alert(JSON.stringify(data));
            },
            error: function (xhr, textStatus, errorThrown) {
                var msg = xhr.responseText;
                var response = JSON.parse(msg);
                alert('操作执行异常，请查看浏览器控制台信息');
                console.log(xhr);
                console.log(textStatus);
                console.log(errorThrown);
            }
        });
    }

    //删除一个person，get操作
    function deletePerson(id) {
        $.ajax({
            type: 'delete',
            url: '/hello/deletePerson',
            data: {id: id},
            success: function (data) {
                alert(JSON.stringify(data));
            },
            error: function (xhr, textStatus, errorThrown) {
                var msg = xhr.responseText;
                var response = JSON.parse(msg);
                alert('操作执行异常，请查看浏览器控制台信息');
                console.log(xhr);
                console.log(textStatus);
                console.log(errorThrown);
            }
        });
    }

</script>
